<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <title>%(xml_escaped_title)s</title>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.5/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@0.7.5/dist/leaflet.js"></script>

    <style>
        body { margin:0; padding:0; }
        body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
        #map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
        .ctl {
            padding: 2px 10px 2px 10px;
            background: white;
            background: rgba(255,255,255,0.9);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
            text-align: right;
        }
        .title {
            font-size: 18pt;
            font-weight: bold;
        }
        .src {
            font-size: 10pt;
        }

    </style>

</head>
<body>

<div id="map"></div>

<script>
/* **** Leaflet **** */

// Base layers
//  .. OpenStreetMap
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', minZoom: %(minzoom)s, maxZoom: %(maxzoom)s});

//  .. CartoDB Positron
var cartodb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CartoDB</a>', minZoom: %(minzoom)s, maxZoom: %(maxzoom)s});

//  .. White background
var white = L.tileLayer("", {minZoom: %(minzoom)s, maxZoom: %(maxzoom)s});

// Overlay layers (TMS)
var lyr = L.tileLayer('./{z}/{x}/{y}.%(tileformat)s', {tms: %(tms)s, opacity: 0.7, attribution: "%(copyright)s", minZoom: %(minzoom)s, maxZoom: %(maxzoom)s});

// Map
var map = L.map('map', {
    center: [%(centerlon)s, %(centerlat)s],
    zoom: %(beginzoom)s,
    minZoom: %(minzoom)s,
    maxZoom: %(maxzoom)s,
    layers: [osm, lyr]
});

var basemaps = {"OpenStreetMap": osm, "CartoDB Positron": cartodb, "Without background": white}
var overlaymaps = {"Layer": lyr}

// Title
var title = L.control();
title.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'ctl title');
    this.update();
    return this._div;
};
title.update = function(props) {
    this._div.innerHTML = "%(double_quote_escaped_title)s";
};
title.addTo(map);

// Note
var src = 'Generated by <a href="https://gdal.org/programs/gdal_raster_tile.html">gdal raster tile</a>';
var title = L.control({position: 'bottomleft'});
title.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'ctl src');
    this.update();
    return this._div;
};
title.update = function(props) {
    this._div.innerHTML = src;
};
title.addTo(map);


// Add base layers
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);

// Fit to overlay bounds (SW and NE points with (lat, lon))
map.fitBounds([[%(south)s, %(east)s], [%(north)s, %(west)s]]);

</script>

</body>
</html>
